<template>
    <a-spin :spinning="spinning">
        <table-search @search="search(1)" :isExtra="false" @reset="reset()">
            <template slot="form">
                <form-item label="">
                     <a-tree-select
                        v-model="form.deptName"
                        allowClear
                        style="width:240px"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :tree-data="deptList"
                        :replaceFields="{children:'children',
                        title:'deptName',
                        key:'deptId',
                        value: 'deptName' }"
                        placeholder="请选择部门"
                    >
                    </a-tree-select>
                </form-item>
                <form-item label="">
                    <a-select
                        v-model="form.personName"
                        show-search
                        style="width:150px;"
                        allowClear
                        placeholder="请选择人员"
                        >
                        <a-select-option :value="item.name" v-for="item in staffList" :key="item.id+'_'+item.name">{{item.name}}</a-select-option>
                    </a-select>
                </form-item>
                <form-item label="">
                    <a-date-picker
                        v-model="form.qryYear"
                        mode="year"
                        format='YYYY'
                        :open='yearShowOne'
                        placeholder="请选择年份"
                        @openChange="openChangeOne" 
                        @panelChange="panelChangeOne" >
                    </a-date-picker>
                </form-item>
            </template>
            <template slot="control">
                <a-button class="form_btn btn_space" type="primary" icon="download" @click="download">导出列表</a-button>
            </template>
        </table-search>
        <table-list
            :loading="loading"
            :columns="columns"
            rowKey="train_person_id"
            :pagination="pagination"
            :data="list"
        >
        </table-list>
    </a-spin>
</template>
<script>
import table from '@/mixins/table';
import {columns} from './total'

const moment = require('moment');
import {remoteTotalInfo,remoteDownloadTrain} from '@/api/operation/train'
import {downloadFile} from '@/utils'

export default {
    name:'TotalInfo',
    mixins: [table],
    props:{
        info:{
            type:Object,
            default:()=>{}
        },
        deptList:{
            type:Array,
            default:()=>[]
        },
        staffList:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        let originForm = {
            qryYear:null,
            personName:undefined,
            deptName:undefined,
        }
        return{
            columns,
            originForm,
            spinning:false,
            form:{
                ...originForm
            },
            yearShowOne:false
        }
    },
    created(){
        this.search(1)
    },
    methods:{
        async search(page){
            try {
                this.loading = true;
                if (page) {
                    this.form.page = page;
                }
                this.list = [];
                let res = await remoteTotalInfo(this.form);
                let {list,total} = res.data;
                this.list = list;
                this.total = total
            } finally {
                this.loading = false;
            }
        },
        // 弹出日历和关闭日历的回调
        openChangeOne(status){
            //status是打开或关闭的状态
            if(status){
                this.yearShowOne =  true
            }
        },
        // 得到年份选择器的值
        panelChangeOne(e){
            if(e){
                let year = moment(e).format("YYYY");
                this.form.qryYear = year;
            }else{
                this.form.qryYear = null;
            }
            this.yearShowOne = false
        },
        async getResource(){
            let res = await staffApi.remoteList({page:1,size:1000});
            let {list} = res.data;
            this.staffList = list;
        },
        //下载统计表
        async download(){
            try{
                this.spinning = true;
                let {deptName,qryYear,personName} = this.form;
                // if(!qryYear){
                //     this.$message.error('请选择导出数据年')
                //     return false;
                // }
                let res = await remoteDownloadTrain(this.form);
                let text = '年度学时统计表'
                let fileName = '';
                if(deptName){
                    fileName+=deptName
                }
                if(personName){
                    fileName+=personName
                }
                if(qryYear){
                    fileName+=qryYear
                }
                fileName+=text
                downloadFile(res,fileName,'xlsx')
            }finally{
                this.spinning = false;
            }
        }
        // async handleSearch(e){
        //     if(!e) return false;
        //     let res = await staffApi.remoteList({page:1,size:500,name:e});
        //     let {list} = res.data;
        //     this.staffList = list;
        // }
    }
}
</script>